<template>
  <div>
    <el-container>
      <el-header>
        <div>当前聊天对象:{{ this.name }}
          <span style="float: right">
          <a class="el-icon-back" @click="back"><font style="font-size: 15px"><u>返回</u></font></a>
      </span></div>
      </el-header>
      <el-main>
        <div class="chat-content">
          <div v-for="item in itemlist" :key="item.id" style="padding-top: 25px">
            <div class="word" v-if="item.id!=='1'">
              <div class="d3">{{ item.name }}</div>&nbsp;<div class="d1"><span class="sp1">{{ item.content1 }} </span>
            </div>
            </div>
            <div class="word-my" v-else>
              <div class="d2"><span class="sp2">{{ item.content1 }}</span></div>&nbsp;<div class="d4">{{
                item.name
              }}
            </div>
            </div>
            <br/>
          </div>
        </div>
      </el-main>
      <el-footer height="200px">
        <div>
          <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              v-model="content"
          >
          </el-input>
          <el-button type="primary" style="width: 100px" @click="sendmsg">发送</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 70px;
}

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.el-main {
  background-color: aliceblue;
  color: #333;
  text-align: center;
}

.chat-content {
  height: 500px;
  overflow: auto;
}

.word {
  float: left;
  margin-left: 10%;
}

.word-my {
  float: right;
  margin-right: 10%;
}

.d1 {
  display: inline-block;
  padding-left: 10px;
  background: #508bc7;
  width: auto;
  height: auto;
  border-radius: 6px;
  color: white;
}

.d2 {
  display: inline-block;
  padding-right: 10px;
  background: #508bc7;
  width: auto;
  height: auto;
  border-radius: 6px;
  color: white;
}

.d3 {
  display: inline-block;
  border: 1px solid black;
  padding: 5px;
  min-width: 20px;
  border-radius: 5px;
}

.d4 {
  display: inline-block;
  border: 1px solid black;
  padding: 5px;
  min-width: 20px;
  border-radius: 5px;
}

.sp1 {
  width: auto;
  height: 28px;
  padding-right: 10px;
  font-size: 20px;
}

.sp2 {
  width: auto;
  height: 28px;
  padding-left: 10px;
  font-size: 20px;
}
</style>

<script>
import {getUserName} from '../../api/index'

export default {
  data() {
    return {
      content: '',
      websock: null,
      item: '',
      id: '',
      name: '',
      me: '',
      my: '',
      accept: '',
      itemlist: []
    }
  },
  created() {
    this.getParams()
    this.me = window.localStorage.getItem("id")
    this.my = window.localStorage.getItem("username")
    console.log(this.$route.query.id)
    this.initWebSocket();
  },
  destroyed() {
    this.websock.close() //离开路由之后断开websocket连接
  },
  methods: {
    sendmsg() {
      this.itemlist.push({id: '1', name: this.my, content1: this.content})
      console.log(this.content)
      this.websocketsend(JSON.stringify(this.content))
      this.content = ""
    },
    getParams() {
// 取到路由带过来的参数
      var routerParams = this.$route.query.id
// 将数据放在当前组件的数据内
      this.id = routerParams
      getUserName({id: routerParams}).then(res => {
        this.name = res.data.data.name
      })
    },
    initWebSocket() { //初始化weosocket
      const wsuri = "ws://127.0.0.1:8080/websocket/" + window.localStorage.getItem("id") + '-' + this.$route.query.id;
      console.log(wsuri)
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
      console.log()
    },
    websocketonopen() { //连接建立之后执行send方法发送数据
      let actions = window.localStorage.getItem("username");
      //this.websocketsend(actions);
    },
    websocketonerror() {//连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) { //数据接收
      if(e!==undefined){
        console.log(e)
        var json=JSON.parse(e.data)
        console.log(json)
        //console.log(JSON.stringify(e.data))
        this.itemlist.push({id: '2', name: this.name, content1: json})
        console.log('接受信息')
      }
    },
    websocketsend(Data) {//数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {  //关闭
      console.log('断开连接', e);
    },
    back(){
      console.log(this.$route.query.pg)
      if(this.$route.query.pg===1){
        this.$router.push({path:'/mainpage'})
      }else {
        this.$router.push({path:'/mine'})
      }
    }
  },
  watch: {
// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
    '$route': 'getParams'
  }
}
</script>

